<template>
    <div class="main">
        <H1 style="font-size:1.8rem;">{{content | problemType}}: {{content.title}}</H1>
        <H3>
            <span v-if="content.memory_limit">时间限制: {{content.memory_limit}}ms</span>
            <span v-if="content.time_limit">内存限制: {{content.time_limit}}MB</span>
            <span v-if="content.submit">提交: {{content.submit}}</span>
            <span v-if="content.accepted">解决: {{content.accepted}}</span>
        </H3>
        <Card v-if="content.description" class="card" title="题目描述">
            <p v-html="content.description"></p>
        </Card>
        <Card v-if="content.input" class="card" title="输入说明">
            <p v-html="content.input"></p>
        </Card>
        <Card v-if="content.output" class="card" title="输出说明">
            <p v-html="content.output"></p>
        </Card>
        <Card v-if="content.sample_input" class="card" title="样例输入">
            <div slot="extra">
                <Icon
                    style="font-size:1.2rem"
                    @click.native="copyText(content.sample_input)"
                    type="ios-copy-outline"
                />
            </div>
            <p v-html="content.sample_input"></p>
        </Card>
        <Card v-if="content.sample_output" class="card" title="样例输出" isCopy>
            <div slot="extra">
                <Icon
                    style="font-size:1.2rem"
                    @click.native="copyText(content.sample_output)"
                    type="ios-copy-outline"
                />
            </div>
            <p v-html="content.sample_output"></p>
        </Card>
        <Card v-if="content.hint" class="card" title="提示">
            <p v-html="content.hint"></p>
        </Card>
        <template v-if="getUserRole.is_submit_code">
            <Card v-if="content.problem_type=='problem_prog'" class="card" title="提交代码">
                <CodePart :problem-id="content.problem_id"></CodePart>
            </Card>
            <Card v-else-if="content.problem_type=='problem_gap'" class="card" title="提交答案">
                <GapPart
                    :problem-id="content.problem_id"
                    :is-normal="content.is_normal==1"
                ></GapPart>
            </Card>
            <Card v-else-if="content.problem_type=='problem_select'" class="card" title="提交答案">
                <SelectPart
                    :problem-id="content.problem_id"
                    :is-radio="content.is_radio==1"
                    :options="content.options"
                ></SelectPart>
            </Card>
        </template>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import CodePart from "_c/CodePart";
import BreadPart from "_c/BreadPart";
import SelectPart from "_c/SelectPart";
import GapPart from "_c/GapPart";
import { clipboard } from "@/libs/tools";
export default {
  name: "ProblemPart",
  components: { CodePart, BreadPart, SelectPart,GapPart },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["getUserRole"])
  },
  props: {
    content: {
      type: Object
    }
  },
  filters: {
    problemType(item) {
      if (item.problem_type === "problem_prog") {
        return "编程";
      } else if (item.problem_type === "problem_gap") {
        if (item.is_normal === 1) {
          return "填空";
        } else {
          return "程序填空";
        }
      } else {
        if (item.is_radio === 1) {
          return "单选";
        } else {
          return "多选";
        }
      }
    }
  },
  methods: {
    copyText(e) {
      e = e.replace(/&nbsp;/gim, " ");
      e = e.replace(/<br>/gim, "\n");
      clipboard("copy", e);
      this.$Message.success("复制成功");
    }
  },
  created() {
    this.$route.meta.title = this.content.title;
    console.log(this.content);
  }
};
</script>

<style lang="less" scoped>
.card {
  margin-top: 10px;
}
.main {
  //   background: #f8f8f9;
}
</style>